import React, { useEffect, useRef } from 'react';
import { Row, Col } from 'antd';
import * as echarts from 'echarts';
import './water.less';
import Map from "../components/jwh/Mapcontainer";
import { px2rem } from '../../utils/rem';

const WaterManagement: React.FC = () => {
  // 模拟数据
  const irrigationData = [
    { name: '乡镇1', value: 120 },
    { name: '乡镇2', value: 140 },
    { name: '乡镇3', value: 230 },
    { name: '乡镇4', value: 100 },
    { name: '乡镇5', value: 130 },
  ];

  const waterSupplyData = [
    { name: '水源1', value: 15 },
    { name: '水源2', value: 40 },
    { name: '水源3', value: 25 },
    { name: '水源4', value: 55 },
  ];

  const annualWaterUsageData = [
    { name: '灌片', value: 123 },
    { name: '灌片', value: 100 },
    { name: '乡镇', value: 65 },
    { name: '乡镇', value: 75 },

  ];

  const irrigationForecastData = [
    { name: '灌片', value: 10 },
    { name: '灌片', value: 14 },
    { name: '灌片', value: 23 },
    { name: '灌片', value: 10 },
    { name: '灌片', value: 13 },
    { name: '灌片2', value: 18 },
  ];

  const waterReleaseData = [
    { name: '已实施', value: 2 },
    { name: '实施中', value: 3 },
    { name: '待实施', value: 5 },
  ];

  // 灌区灌溉overview柱状图 ref
  const irrigationChartRef = useRef<HTMLDivElement>(null);
  // 供水分析饼图 ref
  const waterSupplyChartRef = useRef<HTMLDivElement>(null);
  // 灌区年度用水统计柱状图 ref
  const annualWaterUsageChartRef = useRef<HTMLDivElement>(null);
  // 灌溉预报柱状图 ref
  const irrigationForecastChartRef = useRef<HTMLDivElement>(null);
  // 放水发布饼图 ref
  const waterReleaseChartRef = useRef<HTMLDivElement>(null);

  useEffect(() => {
    const charts = [
      { ref: irrigationChartRef, option: getIrrigationChartOption() },
      { ref: waterSupplyChartRef, option: getWaterSupplyChartOption() },
      { ref: annualWaterUsageChartRef, option: getAnnualWaterUsageChartOption() },
      { ref: irrigationForecastChartRef, option: getIrrigationForecastChartOption() },
      { ref: waterReleaseChartRef, option: getWaterReleaseChartOption() }
    ];

    // 初始化所有图表
    charts.forEach(({ ref, option }) => {
      if (ref.current) {
        const chart = echarts.init(ref.current);
        chart.setOption(option);
        
        // 添加响应式处理
        const resizeChart = () => {
          chart.resize();
        };
        window.addEventListener('resize', resizeChart);
        return () => {
          window.removeEventListener('resize', resizeChart);
          chart.dispose();
        };
      }
    });
  }, []);

  // 图表配置函数
  const getIrrigationChartOption = () => ({
    grid: {
      top: '10%',
      left: '3%',
      right: '3%',
      bottom: '10%',
      containLabel: true
    },
    xAxis: {
      type: 'category',
      data: irrigationData.map(item => item.name),
      axisLabel: {
        color: '#fff',
        fontSize: px2rem(12)
      }
    },
    yAxis: {
      type: 'value',
      axisLabel: {
        color: '#fff',
        fontSize: px2rem(12)
      }
    },
    series: [{
      data: irrigationData.map(item => item.value),
      type: 'bar',
      color: '#007bff'
    }]
  });

  const getWaterSupplyChartOption = () => ({
    legend: {
      orient: 'vertical',
      left: 'right',
      textStyle: {
        color: '#fff',
        fontSize: px2rem(12)
      }
    },
    series: [{
      type: 'pie',
      radius: ['68%', '95%'],
      data: waterSupplyData,
      color: ['#007bff', '#00bfff', '#008b8b', '#fff800'],
      label: {
        color: '#fff',
        fontSize: px2rem(12)
      }
    }]
  });

  const getAnnualWaterUsageChartOption = () => ({
    grid: {
      top: '10%',
      left: '3%',
      right: '3%',
      bottom: '10%',
      containLabel: true
    },
    xAxis: {
      type: 'value',
      axisLabel: {
        color: '#fff',
        fontSize: px2rem(12)
      }
    },
    yAxis: {
      type: 'category',
      data: annualWaterUsageData.map(item => item.name),
      axisLabel: {
        color: '#fff',
        fontSize: px2rem(12)
      }
    },
    series: [{
      data: annualWaterUsageData.map(item => item.value),
      type: 'bar',
      color: '#007bff'
    }]
  });

  const getIrrigationForecastChartOption = () => ({
    grid: {
      top: '10%',
      left: '3%',
      right: '3%',
      bottom: '10%',
      containLabel: true
    },
    xAxis: {
      type: 'category',
      data: irrigationForecastData.map(item => item.name),
      axisLabel: {
        color: '#fff',
        fontSize: px2rem(12)
      }
    },
    yAxis: {
      type: 'value',
      axisLabel: {
        color: '#fff',
        fontSize: px2rem(12)
      }
    },
    series: [{
      data: irrigationForecastData.map(item => item.value),
      type: 'bar',
      color: '#007bff'
    }]
  });

  const getWaterReleaseChartOption = () => ({
    legend: {
      orient: 'vertical',
      left: 'right',
      textStyle: {
        color: '#fff',
        fontSize: px2rem(12)
      }
    },
    series: [{
      type: 'pie',
      radius: ['68%', '95%'],
      data: waterReleaseData,
      color: ['#007bff', '#008b8b', '#00bfff'],
      label: {
        color: '#fff',
        fontSize: px2rem(12)
      }
    }]
  });

  return (
    <div className='buju'>
      <Row gutter={[16, 16]} style={{ height: '100%' }}>
        <Col xs={24} lg={8} style={{ height: '100%' }}>
          {/* 灌区灌溉概况 */}
          <div className="chart-container small-chart">
            <h6 className='guanqu'>灌区灌溉概况</h6>
            <select className="custom-select">
              <option>下拉菜单</option>
              <option>2022</option>
              <option>2023</option>
              <option>2024</option>
            </select>
            <table className="table-sm">
              <tbody>
                <tr>
                  <th>设计灌溉面积</th>
                  <td>123.4万亩</td>
                  <th>有效灌溉面积</th>
                  <td>123.4万亩</td>
                  <th>耕地面积</th>
                  <td>123.4万亩</td>
                </tr>
              </tbody>
            </table>
            <div ref={irrigationChartRef} style={{ width: '100%', height: '60%' }} />
          </div>

          {/* 供水分析 */}
          <div className="chart-container small-chart">
            <h6 className='guanqu'>供水分析</h6>
            <div ref={waterSupplyChartRef} style={{ width: '100%', height: '85%' }} />
          </div>

          {/* 灌区年度用水统计 */}
          <div className="chart-container small-chart">
            <h6 className='guanqu'>灌区年度用水统计</h6>
            <select className="custom-select">
              <option>下拉菜单</option>
              <option>2022</option>
              <option>2023</option>
              <option>2024</option>
            </select>
            <div ref={annualWaterUsageChartRef} style={{ width: '100%', height: '75%' }} />
          </div>
        </Col>

        <Col xs={24} lg={8} style={{ height: '100%' }}>
          {/* 灌区一张图 */}
          <div className="chart-container map-container">
            <h5 className='guanqutu'>| 灌区一张图 |</h5>
            <div style={{ width: '100%', height: 'calc(100% - 3rem)' }}>
              <Map center={[118.261194, 29.474489]} zoom={13} />
            </div>
          </div>
        </Col>

        <Col xs={24} lg={8} style={{ height: '100%' }}>
          {/* 灌溉预报 */}
          <div className="chart-container small-chart">
            <h6 className='guanqu'>灌溉预报</h6>
            <div className="button-group">
              <button className="btn-secondary">需水预报</button>
              <button className="btn-secondary">灌水预报</button>
            </div>
            <div ref={irrigationForecastChartRef} style={{ width: '100%', height: '75%' }} />
          </div>

          {/* 需水研判 */}
          <div className="chart-container">
            <h6 className='guanqu'>需水研判</h6>
            <div className="button-group">
              <button className="btn-secondary">需水预警</button>
              <button className="btn-secondary">需水上报</button>
            </div>
            <table className="table-sm">
              <thead>
                <tr>
                  <th>灌片</th>
                  <th>预警类型</th>
                  <th>预警内容</th>
                  <th>预警时间</th>
                </tr>
              </thead>
              <tbody className="liebiao">
                <tr>
                  <td>1#灌片</td>
                  <td>土壤墒情</td>
                  <td>20cm土层含水量23%</td>
                  <td>05-10 15:00</td>
                </tr>
                <tr>
                  <td>2#灌片</td>
                  <td>田间水层</td>
                  <td>水层高度＜0.01m</td>
                  <td>05-10 15:00</td>
                </tr>
                <tr>
                  <td>3#灌片</td>
                  <td>土壤墒情</td>
                  <td>20cm土层含水量23%</td>
                  <td>05-10 15:00</td>
                </tr>
                <tr>
                  <td>4#灌片</td>
                  <td>土壤墒情</td>
                  <td>水层高度＜0.01m</td>
                  <td>05-10 15:00</td>
                </tr>
              </tbody>
            </table>
          </div>

          {/* 放水发布 */}
          <div className="chart-container small-chart">
            <h6 className='guanqu'>放水发布</h6>
            <div ref={waterReleaseChartRef} style={{ width: '100%', height: '85%' }} />
          </div>
        </Col>
      </Row>
    </div>
  );
};

export default WaterManagement;